<template>
  <div class="vehicle-management">
    <h1>车辆管理</h1>
    
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="search-area">
            <el-input
              placeholder="搜索车辆（品牌/型号/状态）"
              class="search-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
          
          <div>
            <el-button type="primary">
              <el-icon><Plus /></el-icon> 添加车辆
            </el-button>
          </div>
        </div>
      </template>
      
      <div v-if="loading" class="loading-wrapper">
        <el-skeleton :rows="6" animated />
      </div>
      
      <div v-else>
        <h2>车辆列表加载成功</h2>
        <p>请检查控制台日志查看API调用情况</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'VehicleManagement',
  components: {
    Search,
    Plus
  },
  setup() {
    const loading = ref(true)
    
    onMounted(() => {
      console.log('VehicleManagement组件已加载')
      checkApiEndpoints()
      setTimeout(() => {
        loading.value = false
        ElMessage.success('车辆管理页面加载完成')
      }, 1000)
    })
    
    const checkApiEndpoints = async () => {
      try {
        console.log('检查API端点...')
        
        // 尝试获取车辆列表
        try {
          const vehicleListRes = await axios.get('/api/vehicle/list')
          console.log('车辆列表API响应:', vehicleListRes)
        } catch (err) {
          console.error('车辆列表API调用失败:', err)
        }
        
        // 尝试获取车行列表
        try {
          const shopListRes = await axios.get('/api/admin/shops')
          console.log('车行列表API响应:', shopListRes)
        } catch (err) {
          console.error('车行列表API调用失败:', err)
        }
      } catch (err) {
        console.error('API检查过程出错:', err)
      }
    }
    
    return {
      loading
    }
  }
}
</script>

<style scoped>
.vehicle-management {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  width: 300px;
}

.loading-wrapper {
  padding: 20px 0;
}
</style> 